<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">事务办件-出租经营（续期、终止、补充）</div>
                <div>
                    <router-link target="_blank" :to="{ path: '/printfilezltq', query: { id: gdform.id } }"
                        style="padding-right: 12px">
                        <el-button type="primary" size="small">打印</el-button>
                    </router-link>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- 委托运营表格 -->
            <div style="width: 70%; margin: auto">
                <table class="table-2">
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 10px; font-size: 20px">出租经营（续期、终止、补充）</td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">合同类型:</td>
                        <td style="width: 277.61px">
                            <!-- <el-select v-model="projectdetail.htlx" placeholder="请选择合同类型" style="width: 100%" disabled>
                                <el-option v-for="item in htlist" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                            </el-select> -->
                            {{
                        projectdetail.htlx == '1'
                            ? '租赁续期'
                            : projectdetail.htlx == '2'
                                ? '租赁终止'
                                : projectdetail.htlx == '3'
                                    ? '租赁补充'
                                    : ''
                    }}
                        </td>
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">
                            {{ detailform.isstartend == 1 ? '选择合同:' : '合同编号:' }}
                        </td>
                        <td style="width: 277.61px">
                            <el-button @click="getfwlist" type="text" v-if="detailform.isstartend == 1">选择合同</el-button>
                            <span v-else>{{ projectdetail.htbh }}</span>
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">房屋地址:</td>
                        <td>
                            <el-select v-model="projectdetail.buildid" placeholder="请选择房屋地址" style="width: 100%;"
                                @change="getbuildval" :disabled="detailform.isstartend != 1" filterable>
                                <el-option v-for="item in lzlist" :key="item.fwdz" :label="item.fwdz" :value="item.id">
                                </el-option>
                            </el-select>
                        </td> -->
                    </tr>
                </table>
                <table class="table-2" v-for="(adlistitem, index) in projectdetail.buildList" :key="index">
                    <tr style="background-color: #f6eed9">
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">房屋地址:</td>
                        <td colspan="3">
                            {{ adlistitem.fwdz }}
                        </td>
                    </tr>
                    <!-- 三行三列的表格 -->
                    <tr>
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">档案号:</td>
                        <td style="width: 277.61px">
                            {{ adlistitem.dabh }}
                        </td>
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">产权单位:</td>
                        <td style="width: 277.61px">
                            {{ adlistitem.cqdw }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">建筑面积:</td>
                        <td style="width: 277.61px">
                            {{ adlistitem.jzmj }}
                        </td>
                        <td style="text-align: right; width: 147.9px; font-weight: 700; color: #000">房屋性质:</td>
                        <td style="width: 277.61px">
                            {{ adlistitem.fwyt }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 10px; font-size: 20px"></td>
                    </tr>
                </table>
                <table class="table-1">
                    <!-- 旧数据 -->
                    <tr>
                        <td style="text-align: right; font-weight: 700; color: #000">出租地址:</td>
                        <td>
                            {{ projectdetail.czdz }}
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">实际出租面积:</td>
                        <td>
                            {{ projectdetail.czmj }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right; font-weight: 700; color: #000">承租人:</td>
                        <td>
                            {{ projectdetail.czr }}
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">租赁用途:</td>
                        <td>
                            {{ projectdetail.zlyt }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; font-weight: 700; color: #000">
                            {{ projectdetail.type == '2' ? '租金单价:' : '月租金:' }}
                        </td>
                        <td v-if="projectdetail.type == '2'">
                            {{ projectdetail.zjdj ? projectdetail.zjdj + '元/M²·天' : '' }}
                        </td>
                        <td v-else>
                            {{ projectdetail.zjdj ? projectdetail.zjdj + '元/月' : '' }}
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">租赁期限:</td>
                        <td>
                            {{ projectdetail.zlqx }}个月
                        </td> -->
                    </tr>
                    <tr>
                        <td style="text-align: right; font-weight: 700; color: #000">租赁起始时间:</td>
                        <td>
                            {{
                        projectdetail.zlqssj
                            ? (projectdetail.zlqssj = projectdetail.zlqssj.split(' ')[0])
                            : (projectdetail.zlqssj = '')
                    }}
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">租赁到期时间:</td>
                        <td>
                            {{
                            projectdetail.zldqsj
                                ? (projectdetail.zldqsj = projectdetail.zldqsj.split(' ')[0])
                                : (projectdetail.zldqsj = '')
                        }}
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; font-weight: 700; color: #000">合同金额:</td>
                        <td>
                            {{ projectdetail.htje }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" style="font-weight: 700; padding: 10px; font-size: 20px">----------</td>
                    </tr>
                    <!-- 现有数据 -->
                    <tr v-if="projectdetail.htlx == '1'">
                        <td style="text-align: right; font-weight: 700; color: #000">承租人:</td>
                        <td>
                            <el-input v-model="projectdetail.xqczr" placeholder="请输入承租人" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">租赁用途:</td>
                        <td>
                            <el-input v-model="projectdetail.xqzlyt" placeholder="请输入租赁用途" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa" v-if="projectdetail.htlx == '1'">
                        <td style="text-align: right; font-weight: 700; color: #000">
                            {{ projectdetail.type == '2' ? '续期租金单价:' : '续期月租金:' }}
                        </td>
                        <td>
                            <el-input v-model="projectdetail.xqzjdj"
                                :placeholder="projectdetail.type == '2' ? '请输入租金单价' : '请输入月租金'" class="search-input"
                                :disabled="detailform.isstartend != 1">
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 32px"
                                    v-if="projectdetail.type == '2'">元/M²·天</i>
                                <i slot="suffix" style="font-style: normal; margin-right: 10px; line-height: 32px"
                                    v-else>元/月</i>
                            </el-input>
                        </td>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">续期租赁期限:</td>
                        <td>
                            {{ projectdetail.xqzlqx }}个月
                        </td> -->
                    </tr>
                    <tr v-if="projectdetail.htlx == '1'">
                        <td style="text-align: right; font-weight: 700; color: #000">续期租赁起始时间:</td>
                        <td>
                            <el-date-picker type="date" placeholder="选择租赁起始时间" v-model="projectdetail.xqzlqssj"
                                style="width: 100%" value-format="yyyy-MM-dd"
                                :disabled="detailform.isstartend != 1"></el-date-picker>
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">续期租赁到期时间:</td>
                        <td>
                            <el-date-picker type="date" placeholder="选择租赁到期时间" v-model="projectdetail.xqzldqsj"
                                style="width: 100%" value-format="yyyy-MM-dd" :disabled="detailform.isstartend != 1"
                                @change="calculateMonthDifference(projectdetail.zlqssj, projectdetail.zldqsj)"></el-date-picker>
                        </td>
                    </tr>
                    <tr v-if="projectdetail.htlx == '2'">
                        <td style="text-align: right; font-weight: 700; color: #000">终止日期:</td>
                        <td>
                            <el-date-picker type="date" placeholder="选择终止日期" v-model="projectdetail.htzzsj"
                                style="width: 100%" value-format="yyyy-MM-dd"
                                :disabled="detailform.isstartend != 1"></el-date-picker>
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">终止原因:</td>
                        <td>
                            <el-input v-model="projectdetail.htzzyy" placeholder="请输入终止原因" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right;font-weight: 700; color: #000" v-if="projectdetail.htlx == '1'">
                            续期合同金额:</td>
                        <td v-if="projectdetail.htlx == '1'">
                            <el-input v-model="projectdetail.xqhtje" placeholder="请输入合同金额" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                        <td style="text-align: right; font-weight: 700; color: #000">经办人签字:</td>
                        <td :colspan="projectdetail.htlx == '1' ? '1' : '3'">
                            <el-input v-model="projectdetail.jbrqz" placeholder="请输入经办人签字" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                    </tr>

                    <tr>
                        <!-- <td style="text-align: right;font-weight: 700;color: #000;">是否转办件:</td>
                        <td>
                            <el-select v-model="projectdetail.sfzbj" placeholder="请选择是否转办件" clearable style="width: 100%"
                                :disabled="detailform.isstartend != 1">
                                <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </td> -->
                        <!-- <td colspan="2">
                            <el-button size="mini" type="danger" @click="gotoyaojian"
                                :disabled="detailform.isstartend != 1">文件</el-button>
                        </td> -->
                    </tr>
                    <tr>
                        <td style="text-align: right; font-weight: 700; color: #000">中心党委会纪要编号:</td>
                        <td colspan="3">
                            <el-input v-model="projectdetail.jybh" placeholder="请输入中心党委会纪要编号" class="search-input"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                    </tr>
                    <tr style="background-color: #f5fafa">
                        <td style="text-align: right; font-weight: 700; color: #000">办件事由:</td>
                        <td colspan="3">
                            <el-input v-model="projectdetail.bjsy" placeholder="请输入办件事由" class="search-input"
                                type="textarea" :autosize="{ minRows: 4 }"
                                :disabled="detailform.isstartend != 1"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <div style="overflow: hidden; width: 100%" v-if="detailform.isstartend == 1">
                                <el-form ref="yjform" :model="yjform" :inline="true" size="mini" label-width="100px"
                                    style="text-align: left">
                                    <el-form-item label="文件类型:" prop="yjlx">
                                        <div style="width: 160px">
                                            <el-cascader :options="yjlxlist" :show-all-levels="false" v-model="yjlx"
                                                placeholder="请选择文件类型" :props="{ checkStrictly: true }"
                                                clearable></el-cascader>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="文件名称:" prop="yjbz">
                                        <div style="width: 160px">
                                            <el-input placeholder="请输入文件名称" v-model="yjform.yjbz"
                                                style="width: 100%"></el-input>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="是否需要盖章:" prop="sfgz">
                                        <div style="width: 160px">
                                            <el-select v-model="yjform.sfgz" placeholder="请选择是否需要盖章" style="width: 100%"
                                                clearable>
                                                <el-option v-for="item in sflist" :key="item.code" :label="item.name"
                                                    :value="item.code">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="盖章类型:" prop="gzlx">
                                        <div style="width: 160px">
                                            <el-select v-model="yjform.gzlx" placeholder="请选择盖章类型" style="width: 100%"
                                                clearable>
                                                <el-option v-for="item in gzlxlist" :key="item.code" :label="item.name"
                                                    :value="item.code">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitnopic">新增</el-button>
                                    </el-form-item>
                                    <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'"
                                        :on-remove="handleRemoves" :before-remove="beforeRemoves" multiple
                                        :on-success="handelfilesuccess" :headers="myHeaders" :file-list="filefileList">
                                        <div class="unloadTitle">附件</div>
                                        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                                    </el-upload>
                                </el-form>
                                <div style="margin: auto">
                                    <el-button type="primary" @click="submitForm"
                                        v-if="fileLists.length != 0">上传</el-button>
                                </div>
                            </div>
                            <div id="sortableDiv">
                                <el-table :data="yjtableData" style="width: 100%; margin-top: 10px" border ref="pxtable"
                                    row-key="no" :cell-style="cellposion">
                                    <el-table-column prop="yjbz" label="文件名称" align="center"
                                        :show-overflow-tooltip="true">
                                    </el-table-column>
                                    <el-table-column prop="yjlx" label="文件类型" align="center" width="80">
                                    </el-table-column>
                                    <el-table-column prop="wjmc" label="文件预览" align="center"
                                        :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <div v-if="scope.row.fj">
                                                <router-link target="_blank"
                                                    :to="{ path: '/perviewfile', query: { id: scope.row.fj, type: scope.row.suffix } }"
                                                    style="color: #008a94" v-if="scope.row.suffix == '.docx' ||
                        scope.row.suffix == '.doc' ||
                        scope.row.suffix == '.xls' ||
                        scope.row.suffix == '.xlsx'
                        ">{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                                </router-link>
                                                <el-button type="text" size="small"
                                                    @click="redownload(scope.row.fj, scope.row.wjmc, scope.row.suffix)"
                                                    v-else>{{ scope.row.wjmc }}<i
                                                        class="el-icon-document el-icon--right"></i></el-button>
                                            </div>
                                            <span v-else>{{ scope.row.wjmc }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="wjmc" label="文件下载" align="center"
                                        :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small"
                                                @click="downloadfile(scope.row.fj, scope.row.wjmc, scope.row.suffix)"
                                                style="color: blue; text-decoration: underline" v-if="scope.row.fj">{{
                        scope.row.wjmc }}</el-button>
                                            <span v-else>{{ scope.row.wjmc }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column>
                                    <el-table-column prop="gzlx" label="盖章类型" align="center"> </el-table-column>
                                    <el-table-column label="操作" width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small"
                                                @click.native.prevent="deleteRow(scope.$index, yjtableData)"
                                                :style="{ color: detailform.isstartend != 1 ? '#c0c4cc' : 'red' }"
                                                :disabled="detailform.isstartend != 1">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <!-- <el-table :data="filetable" style="width: 100%;" border max-height="150">
                                <el-table-column prop="yjbz" label="文件名称" align="center"> </el-table-column>
                                <el-table-column prop="yjlx" label="文件类型" align="center"> </el-table-column>
                                <el-table-column prop="wjmc" label="文件预览" align="center">
                                    <template slot-scope="scope">
                                        <router-link target="_blank"
                                            :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                            style="color: #008A94;"
                                            v-if="scope.row.fj[0].suffix == '.docx' || scope.row.fj[0].suffix == '.doc' || scope.row.fj[0].suffix == '.xls' || scope.row.fj[0].suffix == '.xlsx'">{{
                        scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                                        </router-link>
                                        <el-button type="text" size="small"
                                            @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            v-else>{{ scope.row.wjmc }}<i
                                                class="el-icon-document el-icon--right"></i></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="wjmc" label="文件下载" align="center">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small"
                                            @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                            style="color:blue;text-decoration: underline">{{ scope.row.wjmc
                                            }}</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column>
                                <el-table-column prop="gzlx" label="盖章类型" align="center"> </el-table-column>
                            </el-table> -->
                        </td>
                    </tr>
                </table>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 70%; margin: auto; margin-top: 30px">
                <el-tab-pane label="通过" name="first">
                    <span slot="label" style="font-size: 16px">
                        <i style="margin: 0 10px 0 10px">
                            <span style="padding-left: 8px; font-weight: bold; font-style: normal">通过</span>
                        </i>
                    </span>
                    <table class="table-1">
                        <tr>
                            <td style="text-align: right; font-weight: 700; color: #000">当前环节:</td>
                            <td colspan="3" style="text-align: left">{{ detailform.bz }}</td>
                        </tr>
                        <!-- <tr style="background-color: #F5FAFA;">
                            <td style="text-align: right;font-weight: 700;color: #000;">步骤:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.nextnodeid" v-if="detailform.ishq == 0">
                                    <el-radio :label="item.id" v-for="(item, index) in detailform.nextnodelist" :key="index"
                                        @change="getry(item)">{{ item.bz }}</el-radio>
                                </el-radio-group>
                                <el-checkbox-group v-model="options" v-else>
                                    <el-checkbox :label="item.id" v-for="(item, index) in detailform.nextnodelist"
                                        :key="index" @change="searchChangeitem(item)">{{ item.bz }}</el-checkbox>
                                </el-checkbox-group>
                            </td>
                        </tr>
                        <tr v-if="detailform.ishq == 0">
                            <td style="text-align: right;font-weight: 700;color: #000;">选择人员:</td>
                            <td colspan="3" style="text-align: left;">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{ item.name
                                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr> -->
                        <tr v-if="detailform.ishq == 1">
                            <td style="text-align: right; font-weight: 700; color: #000">是否会签:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="radio">
                                    <el-radio :label="0">否</el-radio>
                                    <el-radio :label="1">是</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr style="background-color: #f5fafa">
                            <td style="text-align: right; font-weight: 700; color: #000">步骤:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="form.nextnodeid" v-show="radio == 0">
                                    <el-radio :label="item.id" v-for="(item, index) in detailform.nextnodelist"
                                        :key="index" @change="getry(item)">{{ item.bz }}</el-radio>
                                </el-radio-group>
                                <!-- 多选控制只能选一个操作 -->
                                <div>
                                    <el-checkbox-group v-model="options" v-show="radio == 1">
                                        <el-checkbox :label="item.id" v-for="(item, index) in detailform.hqnodelist"
                                            :key="index" @change="searchChangeitem(item)">{{ item.bz }}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr v-if="detailform.ishq == 0">
                            <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{
                        item.name
                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr v-if="detailform.ishq == 1 && radio == 0">
                            <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlist" :key="index">{{
                        item.name
                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; font-weight: 700; color: #000">意见:</td>
                            <td colspan="3">
                                <div style="display: flex; justify-content: space-between">
                                    <div style="width: 48%">
                                        <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                            v-model="form.clyj">
                                        </el-input>
                                    </div>
                                    <div class="xzyj" v-if="role == '10013'">
                                        <div v-for="(item, index) in yjlistld" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">
                                            {{ item }}
                                        </div>
                                    </div>
                                    <div class="xzyj" v-else-if="role == '10010'">
                                        <div v-for="(item, index) in yjlistnq" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">
                                            {{ item }}
                                        </div>
                                    </div>
                                    <div class="xzyj" v-else>
                                        <div v-for="(item, index) in yjlist" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">
                                            {{ item }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="background-color: #f5fafa">
                            <td colspan="4">
                                <el-button size="mini" type="primary" @click="nextstep"
                                    :disabled="isSubmit">通过</el-button>
                                <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="回退" name="second" :disabled="detailform.isth == 0">
                    <span slot="label" style="font-size: 16px">
                        <i style="margin: 0 10px 0 10px">
                            <span style="padding-left: 8px; font-weight: bold; font-style: normal; color: red">回退</span>
                        </i>
                    </span>
                    <table class="table-1">
                        <tr>
                            <td style="text-align: right; font-weight: 700; color: #000">当前环节:</td>
                            <td colspan="3" style="text-align: left">{{ detailform.bz }}</td>
                        </tr>
                        <tr style="background-color: #f5fafa">
                            <td style="text-align: right; font-weight: 700; color: #000">步骤:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="form.nextnodeid">
                                    <el-radio :label="item.id" v-for="(item, index) in detailform.lastnodelist"
                                        :key="index" @change="getryht(item)">{{ item.bz }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; font-weight: 700; color: #000">选择人员:</td>
                            <td colspan="3" style="text-align: left">
                                <el-radio-group v-model="form.selectuser">
                                    <el-radio :label="item.id" v-for="(item, index) in userlistht" :key="index">{{
                        item.name
                    }}</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right; font-weight: 700; color: #000">意见:</td>
                            <td colspan="3">
                                <div style="display: flex; justify-content: space-between">
                                    <div style="width: 48%">
                                        <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入内容"
                                            v-model="form.clyj">
                                        </el-input>
                                    </div>
                                    <div class="xzyj">
                                        <div v-for="(item, index) in yjlistht" :key="index" class="xzyjitem"
                                            :style="yjdeepcolor == index ? 'background-color:#CECECE;' : ''"
                                            @click="getYjVal(item, index)">
                                            {{ item }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr style="background-color: #f5fafa">
                            <td colspan="4">
                                <el-button size="mini" type="primary" @click="nextstepht"
                                    :disabled="isSubmit">回退</el-button>
                                <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
                            </td>
                        </tr>
                    </table>
                </el-tab-pane>
            </el-tabs>

            <el-table :data="tableData" style="width: 70%; margin: 30px auto 0" border>
                <el-table-column prop="sssw" label="所属事务名称" align="center"> </el-table-column>
                <el-table-column prop="gwname" label="岗位" align="center"> </el-table-column>
                <el-table-column prop="zjrname" label="转件人" align="center"> </el-table-column>
                <el-table-column prop="zjrq" label="转件日期" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.zjrq ? scope.row.zjrq.split(' ')[0] : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="bz" label="步骤" align="center"> </el-table-column>
                <el-table-column prop="cz" label="操作" align="center"> </el-table-column>
                <el-table-column prop="clyj" label="处理意见" align="center"> </el-table-column>
                <el-table-column prop="zd" label="转到" align="center"> </el-table-column>
            </el-table>
        </div>
        <el-dialog title="文件" :visible.sync="yjshow" :modal-append-to-body="false" width="80%">
            <el-form ref="yjform" :model="yjform" label-width="auto" :inline="true">
                <el-form-item label="文件类型:" prop="yjlx">
                    <el-cascader :options="yjlxlist" :show-all-levels="false" v-model="yjlx" placeholder="请选择文件类型"
                        :props="{ checkStrictly: true }" clearable></el-cascader>
                    <!-- <el-select v-model="yjform.yjlx" placeholder="请选择文件类型" style="width: 100%;">
                        <el-option v-for="item in yjlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="文件名称:" prop="yjbz">
                    <el-input placeholder="请输入文件名称" v-model="yjform.yjbz" style="width: 100%"></el-input>
                </el-form-item>
                <el-form-item label="是否需要盖章:" prop="sfgz">
                    <el-select v-model="yjform.sfgz" placeholder="请选择是否需要盖章" style="width: 100%" clearable>
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="盖章类型:" prop="gzlx">
                    <el-select v-model="yjform.gzlx" placeholder="请选择盖章类型" style="width: 100%" clearable>
                        <el-option v-for="item in gzlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div style="width: 220px; margin: auto">
                <el-button type="primary" @click="submitForm" v-if="fileLists.length != 0">上传</el-button>
                <el-button @click="yjshow = false">关闭</el-button>
            </div>
            <el-table :data="yjtableData" style="width: 100%; margin: 30px auto 0" border>
                <el-table-column prop="yjlx" label="文件类别" align="center"></el-table-column>
                <el-table-column prop="wjmc" label="文件" align="center"> </el-table-column>
                <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column>
                <el-table-column prop="gzlx" label="盖章类型" align="center"> </el-table-column>
                <el-table-column prop="yjbz" label="文件名称" align="center"> </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, yjtableData)"
                            style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="房屋列表" :visible.sync="fwshow" :modal-append-to-body="false" width="80%">
            <div style="overflow: hidden">
                <el-form ref="fwform" :model="fwform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="承租人:">
                        <div style="width: 150px">
                            <el-input v-model="fwform.czr" placeholder="请输入承租人"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="房屋地址:">
                        <div style="width: 150px">
                            <el-input v-model="fwform.fwdz" placeholder="请输入房屋地址"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="档案编号:">
                        <div style="width: 150px">
                            <el-input v-model="fwform.dabh" placeholder="请输入档案编号"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                        <el-button @click="reSearch" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border>
                    <el-table-column prop="htbh" label="合同编号" align="center" fixed width="160"> </el-table-column>
                    <el-table-column prop="dabh" label="档案编号" align="center" width="240" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="fwdz" label="房屋地址" align="center" width="280" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="czr" label="承租单位" align="center" width="280"> </el-table-column>
                    <el-table-column prop="zjdj" :label="type == '2' ? '租金单价' : '月租金'" align="center">
                    </el-table-column>
                    <el-table-column prop="qdsj" label="签订时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.qdsj ? scope.row.qdsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="zlqssj" label="起租时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.zlqssj ? scope.row.zlqssj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="zldqsj" label="到期时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.zldqsj ? scope.row.zldqsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="120px">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getlzClick(scope.row.id)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="total"
                        :current-page.sync="current" :page-size="pageSize" @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40, 50, 100]" @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    alldetails,
    download,
    caselist,
    lccheck,
    buildlist,
    getbuilddetailbydabh,
    getsignbybuildid,
    dbnum,
    builddetail,
    redownload,
    getsignlist,
    getjfxq
} from '@/api/index';
import fileType from '../vo/filetype';
import valueList from '@/components/common/valueList.vue';
import global from '@/components/common/httpurl.vue';
import Sortable from 'sortablejs'
export default {
    name: 'wtyy',
    data() {
        return {
            yjlx: [],
            isSubmit: false,
            radio: 0,
            activeName: 'first',
            options: [], //测试
            yjlxlist: valueList.yjlxlist, //是否列表
            yjdeepcolor: null,
            yjshow: false, //文件弹框
            fwshow: false, //房屋列表
            yjform: {
                yjbz: null,
                yjlx: null,
                gzlx: null,
                sfgz: null
            }, //文件表单
            jgxslist: valueList.jgxslist,
            qslist: valueList.qslist,
            fwytlist: valueList.fwytlist,
            cblist: valueList.cblist,
            cqdwlist: valueList.cqdwlist,
            sflist: valueList.sflist, //是否列表
            gzlxlist: valueList.gzlxlist, //盖章类型
            htlist: [
                { name: '租赁续期', code: '1' },
                { name: '租赁终止', code: '2' },
                { name: '租赁补充', code: '3' }
            ],
            myHeaders: {
                token: localStorage.getItem('token')
            },
            filefileList: [],
            httpUrl: global.httpUrl, //公共地址
            form: {
                clyj: '', //处理意见
                id: '',
                nextnodeid: '', //选择下一步节点id
                selectuser: '', //下一步选择用户id
                zt: 1 //通过驳回 0：驳回 1：通过
            },
            detailform: {}, //获取详情数据
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            tableData: [],
            yjtableData: [],
            filetable: [], //文件列表
            total: 0,
            current: 1,
            pageSize: 10,
            xcnr: [],
            yjlist: ['同意', '同意，请认真办理！', '拟同意，请领导批示！', '请办公室盖章！', '已盖章', '已办理，请归档！'],
            role: this.$store.getters.role,
            yjlistld: [
                '拟同意，请智宗同志阅示！',
                '同意',
                '同意，请认真办理！',
                '拟同意，请领导批示！',
                '请办公室盖章！',
                '已盖章',
                '已办理，请归档！'
            ],
            yjlistnq: [
                '已归档',
                '请盖章',
                '同意',
                '同意，请认真办理！',
                '拟同意，请领导批示！',
                '请办公室盖章！',
                '已盖章',
                '已办理，请归档！'
            ],
            yjlistht: ['不同意', '不同意，请认真复核！'],
            fileLists: [], //文件列表
            czlist: [], //操作列表
            sflists: [
                { name: '是', value: '1' },
                { name: '否', value: '0' }
            ], //是否
            userlist: [], //部门列表
            userlistht: [], //部门列表
            hqshow: false, //会签按钮显示隐藏,
            fileform: {
                caseid: '',
                pageSize: 100,
                current: 1
            },
            lzform: {
                cb: '',
                cqdw: '',
                create_name: '',
                create_name_id: '',
                create_time: '',
                current: 1,
                czr: '',
                dabh: '',
                dqsj: '', //合同到期时间 ,
                fwdz: '', //地址 ,
                id: '',
                jzmj: '', //建筑面积 ,
                pageSize: 999, //每页数量 ,
                qs: '', //区属 ,
                signid: '',
                status_code: '1',
                type: this.$store.getters.type, //分类 1:房屋 2：楼栋 ,
                update_name: '',
                update_name_id: '',
                update_time: '',
                yzj: '',
                fczt: '1'
            },
            lzlist: [], //楼幢列表,
            gdform: {
                id: ''
            },
            total: 0,
            current: 1,
            pageSize: 10,
            fwform: {
                create_name: '', // 创建人
                create_name_id: '', // 创建人id ,
                create_time: '', // 创建时间 ,
                current: 1, // 第几页 ,
                czmj: '', // 出租面积 ,
                czr: '', //承租人 ,
                czrlxfs: '', //承租人联系方式 ,
                dabh: '', //档案编号 ,
                db: '', //电表 ,
                fj: '', //附件 ,
                fwdz: '', //房屋地址 ,
                glfs: '出租经营', //管理方式 出租经营 委托管理 ,
                htbh: '', //合同编号 ,
                htdqsj: '', //合同到期时间（签订时约定时间） ,
                htje: '', //合同金额 ,
                htzzsj: '', //合同中止时间 ,
                htzzyy: '', //合同中止原因 ,
                id: '', //id ,
                jmje: '', //减免金额 ,
                jmyy: '', //减免原因 ,
                lxdz: '', //联系地址 ,
                ndgrf: '', // 年度供热费 ,
                pageSize: 10, //每页数量 ,
                qdsj: '', //合同签订时间 ,
                relid: '', //关联ID ,
                rqb: '', //燃气表 ,
                rzfj: '', //入住附件 ,
                sbqd: '', //设备清单 ,
                shb: '', //水表 ,
                status_code: 1, //1正常 2删除 ,
                stdwid: '', //受托单位ID ,
                type: '', //分类 1:房间 2：楼栋 ,
                update_name: '', //修改人 ,
                update_name_id: '', //修改人id ,
                update_time: '', //修改时间 ,
                wyf: '', //物业费 ,
                yj: '', //押金 ,
                ysje: '', //预收金额 ,
                zjdj: '', //租金单价 ,
                zjhm: '', //证件号码 ,
                zjmc: '', //证件名称 ,
                zldqsj: '', //租赁到期时间（提前中止修改） ,
                zlqssj: '', //租赁起始时间 ,
                zlqx: '', //租赁期限 ,
                zlyt: '' //租赁用途
            },
            tableData: [],
            type: this.$store.getters.type //分类 1:房屋 2：楼栋 ,
        };
    },
    methods: {
        rowDrop() {
            const tableref = this.$refs.pxtable.$el
            const tbody = tableref.querySelector('#sortableDiv .el-table .el-table__body-wrapper .el-table__body tbody')
            const _this = this
            //这个就是拖拽组件库的使用
            Sortable.create(tbody, {
                onEnd: (evt) => {
                    console.log(evt, '拖拽11')
                    const changedata = _this.yjtableData.splice(evt.oldIndex || 0, 1)
                    _this.yjtableData.splice(evt.newIndex || 0, 0, changedata[0])
                    console.log(_this.yjtableData, '拖拽表格')
                }
            })
        },
        cellposion() {
            return 'cursor: pointer;';
        },
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums';
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;';
        },
        // 计算两个时间
        calculateMonthDifference(startDate, endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);
            const startYear = start.getFullYear();
            const startMonth = start.getMonth();
            const endYear = end.getFullYear();
            const endMonth = end.getMonth();

            let yearDifference = endYear - startYear;
            let monthDifference = endMonth - startMonth;

            // 如果结束月份小于开始月份，则需要减去一年
            if (monthDifference < 0) {
                yearDifference--;
                monthDifference += 12;
            }
            this.form.processtableInfo.stqx = yearDifference * 12 + monthDifference;
            // return yearDifference * 12 + monthDifference;
        },
        // 选中一个的值
        searchChangeitem(val) {
            console.log(val);
        },
        // 单选一个的测试
        searchChange() {
            if (this.options.length > 1) {
                this.options.splice(0, 1);
            }
        },
        // 点击获取人员列表
        getry(val) {
            this.userlist = val.userlist;
        },
        // 点击获取人员列表(回退)
        getryht(val) {
            console.log(val);
            this.userlistht = val.userlist;
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.buildlist(this.form);
            console.log(val);
        },
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        // ishq (integer, optional): 是否会签开始节点 ,
        // isstartend (integer, optional): 是否首尾节点 0：否 1：首节点 2：结束节点 ,
        // isth (integer, optional): 是否可退回 ,
        alldetails(data) {
            var that = this;
            alldetails(data).then((res) => {
                console.log('res', res);
                this.detailform = res.data; //全部数据
                // if (res.data.ishq == 0) {
                if (res.data.nextnodelist.length != 0) {
                    that.form.nextnodeid = res.data.nextnodelist[0].id;
                    that.userlist = res.data.nextnodelist[0].userlist;
                    that.form.selectuser = that.userlist[0].id;
                }
                // }
                this.projectdetail = res.data.processtableInfo; //已录入数据
                this.tableData = res.data.nodeList;
                this.fileform.caseid = res.data.caseid;
                this.form.id = res.data.id;
                this.caselist(this.fileform);
            });
        },
        // 流程文件列表
        caselist(data) {
            caselist(data).then((res) => {
                this.filetable = res.data;
                console.log('filelist', res);
                // 类型 suffix
                let yjlb = res.data.map((item) => {
                    return {
                        caseid: '', // 流程实例id ,
                        create_name: '', //创建人 ,
                        create_name_id: '', //创建人id ,
                        create_time: '', //创建时间 ,
                        fj: item.fj ? item.fj[0].id : '', //附件
                        id: '', // id ,
                        status_code: '1', // 1正常 2删除 ,
                        update_name: '', // 修改人 ,
                        update_name_id: '', //修改人id ,
                        update_time: '', //修改时间 ,
                        wjmc: item.wjmc, //文件名称 ,
                        yjbz: item.yjbz, //文件名称 ,
                        yjlx: item.yjlx, //文件类型
                        sfgz: item.sfgz, //是否需要盖章
                        gzlx: item.gzlx, //盖章类型
                        suffix: item.fj ? item.fj[0].suffix : '' //附件
                    };
                });
                this.yjtableData = this.yjtableData.concat(yjlb);
                // 遍历重新赋值
                this.yjtableData.forEach((item, index) => {
                    item.no = index
                })
                this.$nextTick(() => {
                    this.rowDrop()
                });
            });
        },
        // 流程审批
        lccheck(data) {
            lccheck(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('审批通过');
                    let userid = this.$store.getters.userId;
                    this.dbnum(userid);
                    this.isSubmit = false;
                    this.$router.go(-1);
                }
            });
        },
        // 待办数据
        dbnum(data) {
            dbnum(data).then((res) => {
                console.log('待办', res);
                this.$store.commit('handledbnum1', res.data.swnum);
                this.$store.commit('handledbnum2', res.data.gdnum);
                this.$store.commit('handledbnum4', res.data.wtswnum);
            });
        },
        // 下一步操作按钮
        nextstep() {
            var that = this;
            console.log(this.form);
            this.$confirm('确定通过审批？')
                .then(() => {
                    if (this.detailform.isstartend == 1) {
                        this.form.processtableInfo = this.projectdetail;
                        this.form.fileList = this.yjtableData;
                    }
                    // 先判断是否会签（会签不用选人员）
                    if (this.detailform.ishq == 0) {
                        // 判断是否是最后一个节点（最后一个节点不用选人员）
                        if (that.detailform.isstartend == 2) {
                            that.isSubmit = true;
                            that.lccheck(that.form);
                        } else {
                            if (that.form.selectuser) {
                                that.isSubmit = true;
                                that.lccheck(that.form);
                            } else {
                                that.$message.error('请选择人员！！！');
                            }
                        }
                    } else {
                        if (this.radio == 1) {
                            that.form.selectuser = '';
                            if (that.options.length != 0) {
                                that.form.nextnodeid = that.options.toString();
                                that.form.ishq = '1';
                                that.isSubmit = true;
                                that.lccheck(that.form);
                                console.log(that.form);
                            } else {
                                that.$message.error('请选择！！');
                            }
                        } else {
                            that.form.ishq = '0';
                            if (that.form.selectuser) {
                                that.isSubmit = true;
                                that.lccheck(that.form);
                            } else {
                                that.$message.error('请选择人员！！！');
                            }
                        }
                    }
                })
                .catch(() => {
                    this.$message.success('通过取消');
                });
        },
        // 下一步回退
        nextstepht() {
            this.form.zt = 0;
            this.$confirm('确定回退审批？')
                .then(() => {
                    if (this.form.selectuser) {
                        this.isSubmit = true;
                        this.lccheck(this.form);
                    } else {
                        this.$message.error('请选择人员！！！');
                    }
                })
                .catch(() => {
                    this.$message.success('回退取消');
                });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank');
            });
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList);
            this.fileLists = fileLists;
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file);
            console.log(fileList);
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists);
            this.fileLists = fileLists;
            this.$message.success('导入成功');
        },
        // 获取到每一个意见值
        getYjVal(val, i) {
            this.yjdeepcolor = i;
            console.log(val);
            this.form.clyj = val;
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 跳转文件
        gotoyaojian() {
            this.yjshow = true;
        },
        // 删除
        deleteRow(index, rows) {
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    rows.splice(index, 1);
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 上传功能
        submitForm() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1];
                this.yjform.yjlx = lastItem;
                //this.yjform.yjlx=this.yjform.yjlx.pop();
            } else {
                this.$message.error('请选择文件类型');
                return;
            }
            console.log('yjlx', this.yjform.yjlx);
            console.log('yjbz', this.yjform.yjbz);
            console.log('fileLists', this.fileLists);
            // 类型 suffix
            let yjlb = this.fileLists.map((res) => {
                return {
                    caseid: '', // 流程实例id ,
                    create_name: '', //创建人 ,
                    create_name_id: '', //创建人id ,
                    create_time: '', //创建时间 ,
                    fj: res.response.data.id, //附件
                    id: '', // id ,
                    status_code: '1', // 1正常 2删除 ,
                    update_name: '', // 修改人 ,
                    update_name_id: '', //修改人id ,
                    update_time: '', //修改时间 ,
                    suffix: res.response.data.suffix, //文件类型 ,
                    wjmc: res.response.data.filename, //文件名称 ,
                    yjbz: this.yjform.yjbz, //文件名称 ,
                    yjlx: this.yjform.yjlx, //文件类型
                    sfgz: this.yjform.sfgz, //是否需要盖章
                    gzlx: this.yjform.gzlx //盖章类型
                };
            });
            console.log('yjlb', yjlb);
            this.yjtableData = this.yjtableData.concat(yjlb);
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjform.gzlx = null;
            this.yjlx = null;
            // 遍历重新赋值
            this.yjtableData.forEach((item, index) => {
                item.no = index
            })
            this.filefileList = [];
            this.fileLists = [];
            this.$nextTick(() => {
                this.rowDrop()
            });
        },
        // 上传功能（不包含文件）
        submitnopic() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1];
                this.yjform.yjlx = lastItem;
            } else {
                this.$message.error('请选择文件类型');
                return;
            }
            let yjlb = [
                {
                    caseid: '', // 流程实例id ,
                    create_name: '', //创建人 ,
                    create_name_id: '', //创建人id ,
                    create_time: '', //创建时间 ,
                    fj: '', //附件
                    id: '', // id ,
                    status_code: '1', // 1正常 2删除 ,
                    update_name: '', // 修改人 ,
                    update_name_id: '', //修改人id ,
                    update_time: '', //修改时间 ,
                    wjmc: this.yjform.yjbz, //文件名称 ,
                    yjbz: this.yjform.yjbz, //文件名称 ,
                    yjlx: this.yjform.yjlx, //文件类型
                    sfgz: this.yjform.sfgz, //是否需要盖章
                    gzlx: this.yjform.gzlx, //盖章类型
                    suffix: '' //附件
                }
            ];
            this.yjtableData = this.yjtableData.concat(yjlb);
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjform.gzlx = null;
            this.yjlx = null;
            // 遍历重新赋值
            this.yjtableData.forEach((item, index) => {
                item.no = index
            })
            this.$nextTick(() => {
                this.rowDrop()
            });
        },
        // 选项卡
        handleClick() {
            var that = this;
            if (this.activeName == 'first') {
                if (this.detailform.ishq == 0) {
                    if (that.detailform.nextnodelist.length != 0) {
                        that.form.nextnodeid = that.detailform.nextnodelist[0].id;
                        that.userlist = that.detailform.nextnodelist[0].userlist;
                        that.form.selectuser = that.userlist[0].id;
                    }
                }
            } else if (this.activeName == 'second') {
                this.form.nextnodeid = this.detailform.lastnodelist[0].id;
                this.userlistht = this.detailform.lastnodelist[0].userlist;
                this.form.selectuser = this.userlistht[0].id;
            }
        },
        // 楼幢
        buildlist(data) {
            buildlist(data).then((res) => {
                if (res.code == 200) {
                    this.lzlist = res.data.records;
                } else {
                    this.lzlist = [];
                }
            });
        },
        // 获取楼幢信息
        getbuildval(val) {
            console.log('楼幢详情', val);
            let data = {
                id: val
            };
            builddetail(data).then((res) => {
                this.form.processtableInfo.dabh = res.data.dabh;
                this.form.processtableInfo.cqdw = res.data.cqdw;
                this.form.processtableInfo.dz = res.data.fwdz;
                this.form.processtableInfo.fwyt = res.data.fwyt;
                this.form.processtableInfo.jzmj = res.data.jzmj;
                this.form.processtableInfo.buildid = res.data.id;
                let data = {
                    relid: res.data.id
                };
                this.getsignbybuildid(data);
            });
            // getbuilddetailbydabh(data).then(res => {
            //     console.log(res)
            //     this.projectdetail.dabh = res.data.dabh
            //     this.projectdetailfwzldw = res.data.fwzldw
            //     this.projectdetail.dz = res.data.fwdz
            //     this.projectdetail.fwyt = res.data.fwyt
            //     this.projectdetail.jzmj = res.data.jzmj
            //     this.projectdetail.buildid = res.data.id
            //     let data = {
            //         relid: res.data.id
            //     }
            //     this.getsignbybuildid(data)
            // })
        },
        // 旧合同详情
        getsignbybuildid(data) {
            getsignbybuildid(data).then((res) => {
                console.log('旧合同详情', res.data);
                this.projectdetail.signid = res.data.id;
                this.projectdetail.czr = res.data.czr;
                this.projectdetail.zlyt = res.data.zlyt;
                this.projectdetail.zjdj = res.data.zjdj;
                this.projectdetail.zlqx = res.data.zlqx;
                this.projectdetail.zlqssj = res.data.zlqssj;
                this.projectdetail.zldqsj = res.data.zldqsj;
                this.projectdetail.htje = res.data.htje;
            });
        },
        // 房屋列表（功能）
        //打开房屋列表弹框
        getfwlist() {
            this.fwshow = true;
            this.current = 1;
            this.fwform = {
                create_name: '', // 创建人
                create_name_id: '', // 创建人id ,
                create_time: '', // 创建时间 ,
                current: 1, // 第几页 ,
                czmj: '', // 出租面积 ,
                czr: '', //承租人 ,
                czrlxfs: '', //承租人联系方式 ,
                dabh: '', //档案编号 ,
                db: '', //电表 ,
                fj: '', //附件 ,
                fwdz: '', //房屋地址 ,
                glfs: '出租经营', //管理方式 出租经营 委托管理 ,
                htbh: '', //合同编号 ,
                htdqsj: '', //合同到期时间（签订时约定时间） ,
                htje: '', //合同金额 ,
                htzzsj: '', //合同中止时间 ,
                htzzyy: '', //合同中止原因 ,
                id: '', //id ,
                jmje: '', //减免金额 ,
                jmyy: '', //减免原因 ,
                lxdz: '', //联系地址 ,
                ndgrf: '', // 年度供热费 ,
                pageSize: 10, //每页数量 ,
                qdsj: '', //合同签订时间 ,
                relid: '', //关联ID ,
                rqb: '', //燃气表 ,
                rzfj: '', //入住附件 ,
                sbqd: '', //设备清单 ,
                shb: '', //水表 ,
                status_code: 1, //1正常 2删除 ,
                stdwid: '', //受托单位ID ,
                type: '', //分类 1:房间 2：楼栋 ,
                update_name: '', //修改人 ,
                update_name_id: '', //修改人id ,
                update_time: '', //修改时间 ,
                wyf: '', //物业费 ,
                yj: '', //押金 ,
                ysje: '', //预收金额 ,
                zjdj: '', //租金单价 ,
                zjhm: '', //证件号码 ,
                zjmc: '', //证件名称 ,
                zldqsj: '', //租赁到期时间（提前中止修改） ,
                zlqssj: '', //租赁起始时间 ,
                zlqx: '', //租赁期限 ,
                zlyt: '', //租赁用途
                fgy: this.$store.getters.role == '10011' ? this.$store.getters.userId : ''
            };
            this.getsignlist(this.fwform);
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.fwform.current = val;
            this.fwform.pageSize = this.pageSize;
            this.getsignlist(this.fwform);
            console.log(val);
        },
        // 每页条数
        handleSizeChange(val) {
            this.current = 1;
            this.pageSize = val;
            this.fwform.pageSize = val;
            this.getsignlist(this.fwform);
            console.log(val);
        },
        // 搜索
        onSearch() {
            this.current = 1;
            this.fwform.current = 1;
            this.getsignlist(this.fwform);
            console.log('搜索');
        },
        // 重置
        reSearch() {
            this.current = 1;
            this.pageSize = 10;
            this.fwform = {
                create_name: '', // 创建人
                create_name_id: '', // 创建人id ,
                create_time: '', // 创建时间 ,
                current: 1, // 第几页 ,
                czmj: '', // 出租面积 ,
                czr: '', //承租人 ,
                czrlxfs: '', //承租人联系方式 ,
                dabh: '', //档案编号 ,
                db: '', //电表 ,
                fj: '', //附件 ,
                fwdz: '', //房屋地址 ,
                glfs: '出租经营', //管理方式 出租经营 委托管理 ,
                htbh: '', //合同编号 ,
                htdqsj: '', //合同到期时间（签订时约定时间） ,
                htje: '', //合同金额 ,
                htzzsj: '', //合同中止时间 ,
                htzzyy: '', //合同中止原因 ,
                id: '', //id ,
                jmje: '', //减免金额 ,
                jmyy: '', //减免原因 ,
                lxdz: '', //联系地址 ,
                ndgrf: '', // 年度供热费 ,
                pageSize: 10, //每页数量 ,
                qdsj: '', //合同签订时间 ,
                relid: '', //关联ID ,
                rqb: '', //燃气表 ,
                rzfj: '', //入住附件 ,
                sbqd: '', //设备清单 ,
                shb: '', //水表 ,
                status_code: 1, //1正常 2删除 ,
                stdwid: '', //受托单位ID ,
                type: '', //分类 1:房间 2：楼栋 ,
                update_name: '', //修改人 ,
                update_name_id: '', //修改人id ,
                update_time: '', //修改时间 ,
                wyf: '', //物业费 ,
                yj: '', //押金 ,
                ysje: '', //预收金额 ,
                zjdj: '', //租金单价 ,
                zjhm: '', //证件号码 ,
                zjmc: '', //证件名称 ,
                zldqsj: '', //租赁到期时间（提前中止修改） ,
                zlqssj: '', //租赁起始时间 ,
                zlqx: '', //租赁期限 ,
                zlyt: '' //租赁用途
            };
            this.getsignlist(this.fwform);
            console.log('搜索');
        },
        // 选择获取房屋信息
        getlzClick(val) {
            console.log('id', val);
            this.getjfxq(val);
        },
        // 项目列表
        getsignlist(data) {
            getsignlist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            });
        },
        // 租金交款详情页
        getjfxq(data) {
            getjfxq(data).then((res) => {
                console.log('详情', res.data);
                this.projectdetail.buildList = res.data.buildinfo;
                this.projectdetail.signid = res.data.signInfo.id;
                this.projectdetail.czr = res.data.signInfo.czr;
                this.projectdetail.zlyt = res.data.signInfo.zlyt;
                this.projectdetail.zjdj = res.data.signInfo.zjdj;
                this.projectdetail.zlqx = res.data.signInfo.zlqx;
                this.projectdetail.zlqssj = res.data.signInfo.zlqssj;
                this.projectdetail.zldqsj = res.data.signInfo.zldqsj;
                this.projectdetail.htje = res.data.signInfo.htje;
                this.projectdetail.htbh = res.data.signInfo.htbh;
                this.fwshow = false;
            });
        }
    },
    mounted() {
        this.buildlist(this.lzform);
        let data = {
            id: this.$route.params.id
        };
        this.alldetails(data);
        this.gdform.id = this.$route.params.id;
    }
};
</script>
<style>
/* disabled颜色修改 */
.el-checkbox__input.is-disabled+.el-checkbox__label {
    color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
    color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
    border-color: #606266 !important;
}

.el-radio__input.is-disabled+span.el-radio__label {
    color: #606266 !important;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #606266 !important;
}

.el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #606266 !important;
}

.el-input.is-disabled .el-input__inner,
textarea:disabled {
    color: #606266 !important;
}

.el-range-editor.is-disabled input {
    color: #606266 !important;
}

.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}

.table-2 {
    border: 1px solid #c0c0c0;
    border-bottom: none;
    border-collapse: collapse;
    /*合并相邻表格的间距*/
}

.table-2 tr,
.table-2 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    border-bottom: none;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}

.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008a94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>